<template>
    <div class="qilin-forget">
        <div class="qilin-forget-header">修改密码</div>
        <div class="qilin-forget-box">
            <QilinForm :formConfig.sync="forgetFormConfig" ref="formForget"
                @keyup.enter.native="register('formForget')" key="formForget"
            ></QilinForm>
        </div>
    </div>
</template>
<script>
import {forgetPassword} from "@/api/register/index.js";
export default {
    data(){
        let validateConfirmPassword=(rule,value,callback)=>{
            if(!value){
                callback("确认密码不可为空");
            }else{
                if(value === this.$refs[rule.custom].ownFormConfig.submitData.password){
                    callback();
                }else{
                    callback("密码不一致");
                };
            };
        };
        return {
            forgetFormConfig:{ //修改密码配置项
                elFormConfig:{
                    labelWidth:"6.429rem"
                },
                itemConfig:[
                    {
                        dataName:"email",
                        labelName:"邮箱",
                        type:"input",
                        inputType:"text",
                        width:24,
                        validate:[
                            {
                                required:true,
                                message:"请输入邮箱",
                                trigger:"blur"
                            }
                        ],
                        otherValidate:"emailValidator"
                    },
                    {
                        dataName:"password",
                        labelName:"密码",
                        type:"input",
                        inputType:"password",
                        width:24,
                        validate:[
                            {
                                required:true,
                                message:"请输入密码",
                                trigger:"blur"
                            }
                        ]
                    },
                    {
                        dataName:"confirmPassword",
                        labelName:"确认密码",
                        type:"input",
                        inputType:"password",
                        width:24,
                        validate:[
                            {
                                required:true,
                                trigger:"blur",
                                custom:"formForget", //custom为自定义属性，用以当不同表单使用同一个校验方法时区分
                                validator:validateConfirmPassword
                            }
                        ]
                    }
                ],
                submitData:{
                    email:"",
                    password:"",
                    confirmPassword:""
                },
                buttonConfig:[
                    {
                        btnName:"确认修改",
                        type:"primary",
                        className:"qilin-forget-button",
                        formRefName:"formForget",
                        click:this.forgetPassword
                    },
                    {
                        btnName:"取消",
                        type:"default",
                        click:()=>{
                            this.$refs["formForget"].formResetFields();
                            this.$router.back();
                        }
                    }
                ]
            }
        }
    },
    methods:{
        // 确认修改密码按钮事件监听
        forgetPassword(refName){
            this.$refs[refName].formValidate((valid)=>{
                if(valid){
                    forgetPassword(this.forgetFormConfig.submitData).then((res)=>{
                        if(res.code === 1000){
                            this.$message({
                                message:"修改密码成功",
                                type:"success"
                            });
                            this.$refs[refName].formResetFields();
                            this.$router.back();
                        }else{
                            this.$message({
                                message:res.message || "系统错误",
                                type:"error"
                            });
                        };
                    });
                };
            });
        }
    }
}
</script>
<style lang="less">
.qilin-forget{
    width:400px;
    transform:translate(-50%,-50%);
    .EDGQilinPosition(absolute,40%,50%);
    >.qilin-forget-header{
        width:100%;
        color:#fff;
        font-size:24px;
        font-weight:bolder;
        text-align:center;
        letter-spacing:1px;
        padding:20px;
    }
    >.qilin-forget-box{
        background-color:#fff;
        border-radius:5px;
        padding:20px;
        .el-form{
            padding:20px 20px 0 20px;
        }
    }
}
</style>